 <template>
  <div>
    <el-row :gutter="10">
      <!-- <el-col :span="5">
        <el-card class="card" header="所有会话" body-style="padding: 0;">
          <el-scrollbar ref="scrollbar" height="70vh" style="width: 100%" @scroll="scrollTalk">
            <Message v-for="item in times" :key="item" overlength noReadNum="1" />
          </el-scrollbar>
        </el-card>
      </el-col> -->
      <!-- <el-col :span="4">
        <el-card  :body-style="{ padding: '0px' }">
          <template #header>
            <div  slot="header" style="display: flex;justify-content: space-between;align-items: center;">
     <span style="display: flex;align-items: center;"><el-icon  style="font-size: 15px;margin-right: 3px;"><Fold /></el-icon>我所有会话</span> <el-icon style="font-size: 15px"><Search /></el-icon>
    </div>
          </template>
         
      <roomlist />
        </el-card>
      </el-col> -->
      <el-col :span="18">
        <el-card header="聊天窗口">
          <!-- <el-scrollbar height="65vh" style="width: 100%" @scroll="scrollMessage">
            <Message />
          </el-scrollbar> -->
          <Chat />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card" header="联系人信息">
          <Customer />
        </el-card>
        <el-card class="card" header="话术管理"> </el-card>
        <el-card class="card" header="工单信息"> </el-card>
        <el-card class="card" header="指定备注"> </el-card>
      </el-col>
    </el-row>
  </div>
</template>
 
<script lang="ts" setup>
import { ref } from "vue";
import Message from "./components/message.vue";
import Customer from "./components/customer.vue";
import Chat from "./components/chat.vue";
import roomlist from "./components/roomlist.vue";
let scrollbar = ref();
let times = ref(10);
let times1 = ref(10);

let scrollTalk = (s: any) => {
  if (0 === s.scrollTop) {
    times.value += 10;
    console.log(scrollbar.value.$el.scrollTop);
  }
  // console.log(scrollbar.value.$el.scrollHeight)
  // console.log(scrollbar.value.$el.clientHeight)
  // console.log(scrollbar.value.$el.scrollTop)
  // console.log(times)
  // console.log(scrollbar.value.$el)
  // 判断是否滚动到底部
  const isAtBottom = scrollbar.value.$el.scrollTop + scrollbar.value.$el.clientHeight >= scrollbar.value.$el.scrollHeight;

  if (isAtBottom) {
    // 到底部了，可以执行刷新操作
    console.log("到底部了，执行刷新操作");
  }
};

let scrollMessage = (s: any) => {
  if (0 === s.scrollTop) {
    times1.value += 10;
  }
  console.log(scrollbar.value.$el.scrollTop);
  console.log(times1);
};
</script>
 
<style lang="scss" scoped>
.card {
  margin-bottom: 20px;
}
</style>